<template>

    <!---------------------------------------- 查询框 ----------------------------------->
    <div>
        <!------------------------------------ row-1 ------------------------------------>
        <el-row class="mt-2">
            <el-col :span="4" class="tab_s">开始时间</el-col>
            <el-col :span="4">
                <div class="block">
                    <el-date-picker
                        v-model="Input.time_start"
                        type="datetime"
                        placeholder="Pick a Date"
                        format="YYYY/MM/DD hh:mm:ss"
                        value-format="YYYY-MM-DD h:m:s a"
                    />
                </div>
            </el-col>

            <el-col :span="4" class="tab_s">结束时间</el-col>
            <el-col :span="4">
                <div class="block">
                    <el-date-picker
                        v-model="Input.time_end"
                        type="datetime"
                        placeholder="Pick a Date"
                        format="YYYY/MM/DD hh:mm:ss"
                        value-format="YYYY-MM-DD h:m:s a"
                    />
                </div>
            </el-col>
            <el-col :span="4" class="tab_s">方向</el-col>
            <el-col :span="4">
                <div class="block">
                    <el-select v-model="value2" placeholder="Select" style="width: 220px">
                        <el-option
                        v-for="item in Input.direction"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled"
                        />
                    </el-select>
                </div>
            </el-col>
        </el-row>
         <!------------------------------------ row-2 ------------------------------------>
        <el-row class="mt-2">
            <el-col :span="4" class="tab_s">通道</el-col>
            <el-col :span="4">
                <div class="block">
                    <el-select v-model="value2" placeholder="Select" style="width: 220px">
                        <el-option
                        v-for="item in Input.direction"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled"
                        />
                    </el-select>
                </div>
            </el-col>

            <el-col :span="4" class="tab_s">主叫号码</el-col>
            <el-col :span="4">
                <div class="block">
                    <el-input v-model="Input.calling" placeholder="Please input" style="width: 220px" />
                </div>
            </el-col>
            <el-col :span="4" class="tab_s">被叫号码</el-col>
            <el-col :span="4">
                <div class="block">
                    <el-input v-model="Input.called" placeholder="Please input" style="width: 220px"/>
                </div>
            </el-col>
        </el-row>

        <!------------------------------------ row-3 ------------------------------------>
        <el-row class="mt-2 mb-2">
            <el-col :span="4" class="tab_s">通话时间大于</el-col>
            <el-col :span="4">
                <div class="block">
                    <el-input v-model="Input.talk_time_greater " placeholder="Please input" style="width: 220px" />
                </div>
            </el-col>

            <el-col :span="4" class="tab_s">小于</el-col>
            <el-col :span="4">
                <div class="block">
                    <el-input v-model="Input.talk_time_less " placeholder="Please input" style="width: 220px" />
                </div>
            </el-col>

            <el-col :span="4" class="tab_s">分机号码</el-col>
            <el-col :span="4">
                <div class="block">
                    <el-input v-model="Input.extension_number " placeholder="Please input" style="width: 220px" />
                </div>
            </el-col>
        </el-row>
    </div>
    <!------------------------------------ end ------------------------------------>
    <div class="mt-4 flex justify-end" style="height:calc(3vh);">
        <el-button type="primary" @click="search_fun">查询</el-button>
        <el-button type="primary" @click="download_fun">下载</el-button>
        <el-button type="primary" @click="play_fun">播放</el-button>
        <el-button type="primary" @click="delete_fun">删除</el-button>
    </div>
    <!---------------------------------- 查询结果 --------------------------------->
    <div class="mt-4 border-2">
        <div  style="height:calc(55vh);">

            <el-table :data="tableData" border :header-cell-style="{background:'#F3F4F7'}">
            
            <el-table-column prop="channel_id"    label="通道"      align="center" fixed/>
            <el-table-column prop="line_number"   label="线路号码"  align="center"/>
            <el-table-column prop="mode"          label="模式"      align="center"/>
            <el-table-column prop="status"        label="状态"      align="center"/>
            <el-table-column prop="direction"     label="方向"      align="center"/>
            <el-table-column prop="calling"       label="主叫号码"  align="center" min-width="120"/>
            <el-table-column prop="called"        label="被叫号码"  align="center" min-width="120"/>
            <el-table-column prop="time_start"    label="开始时间"  align="center" min-width="120"/>
            <el-table-column prop="talk_time"     label="通话时长"  align="center"/>

            <el-table-column prop="monitoring"    label="监听"      align="center">
                <template #default>
                <el-button :icon="Microphone" ></el-button>
                </template>
            </el-table-column>

            <el-table-column prop="voltage" label="电压" align="center"/>
            </el-table>
        </div>
        <!---------------------------------- 分页表 --------------------------->
        <div class="flex flex justify-center ">
            <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            />
        </div>
    </div>
  </template>
  
<script setup>
  import { Microphone, Mute } from '@element-plus/icons-vue'
  import { ref,reactive,onMounted } from 'vue'
  const handleClick = () => {
    console.log('click')
  }
  const currentPage = ref(1)
  const pageSize = ref(20)
  const total = ref(400)
  const value2 = ref(null)
  const Input = reactive({
    channel_id:  [
        {
            value: 'channel_1',
            label: 'channel_1',
        },
        {
            value: 'channel_2',
            label: 'channel_2',
        },
        {
            value: 'channel_3',
            label: 'channel_3',
        }
    ],
    direction: [
        {
            value: 'Option1',
            label: 'Option1',
        },
        {
            value: 'Option2',
            label: 'Option2',
        },
         {
            value: 'Option3',
            label: 'Option3',
        }
        ],
    calling: '15263781288',
    called: '27912378129',
    extension_number: '123',
    time_start:'5:10',
    time_end:'5:10',
    talk_time_greater:'20',
    talk_time_less:'20',
  })

  const tableData = [
    {
        channel_id: 1,
        line_number: '123',
        mode: 'California',
        status: 'Los Angeles',
        direction: 'A2B',
        calling: '15263781288',
        called: '27912378129',
        time_start:'5:10',
        talk_time:'20',
        monitoring:true,
        voltage:3.3,
    },
    {
        channel_id: 2,
        line_number: '123',
        mode: 'California',
        status: 'Los Angeles',
        direction: 'A2B',
        calling: '15263781288',
        called: '27912378129',
        time_start:'5:10',
        talk_time:'20',
        monitoring:true,
        voltage:3.3,
    },
    {
        channel_id: 3,
        line_number: '123',
        mode: 'California',
        status: 'Los Angeles',
        direction: 'A2B',
        calling: '15263781288',
        called: '27912378129',
        time_start:'5:10',
        talk_time:'20',
        monitoring:true,
        voltage:3.3,
    },
    {
        channel_id: 4,
        line_number: '123',
        mode: 'California',
        status: 'Los Angeles',
        direction: 'A2B',
        calling: '15263781288',
        called: '27912378129',
        time_start:'5:10',
        talk_time:'20',
        monitoring:true,
        voltage:3.3,
    },
  ]
  function handleSizeChange(e)
  {
    console.log('录音查询->handleSizeChange',e);
  }
  function handleCurrentChange(e)
  {
    console.log('录音查询->handleCurrentChange',e);
  }

  //page init
  onMounted(()=> {
      console.log("录音查询->请求：");
    })

    function search_fun(){
        console.log("录音查询->search_fun");
    }

    function download_fun(){
        console.log("录音查询->download_fun");
    }
    function delete_fun(){
        console.log("录音查询->delete_fun");
    }

    function play_fun(){
        console.log("录音查询->play_fun");
    }
</script>

<style scoped>
.table_s{
    @apply bg-gray-500 !important;
}

.tab_s{
    @apply pr-5 !important;
    align-self: center;
    text-align: end;
}

</style>